<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="500"
    :before-close="handleClose"
  >
    <div>
		<el-form
			ref="ruleFormRef"
			style="max-width: 600px"
			:model="ruleForm"
			:rules="rules"
			label-width="auto"
			class="demo-ruleForm"
			:size="formSize"
			status-icon
		>
			<el-form-item label="按钮名称" prop="name">
				<el-input v-model="ruleForm.name" />
			</el-form-item>
			<el-form-item label="按钮地址" prop="address">
				<el-input v-model="ruleForm.address" />
			</el-form-item>
		</el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancle(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, reactive, defineEmits, onMounted } from 'vue'
import { addBottomApi, updataBottomApi } from '@/api/modules/menu.js'
 

const emit = defineEmits(['getCurrentMenu'])
const title = ref('新增按钮')
const dialogVisible = ref(false)
const ruleForm = reactive({
	"name":"",      // 菜单名
	"address":"",     // 访问地址
	"compent":"",                // 对应的页面地址
	"parentId":0,           // 父id，可选填，默认顶级节点0
	"menuType":"bottom",     // 菜单类型：menu，view，bottom，只能填这三个
	"stat":"ENABLE",       // 状态，非必参，可选填：ENABLE启用，DISABLE禁用，默认启用
	"remark":""            // 说明，非必参
})
const rules = reactive({
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' }
  ],
})
const ruleFormRef = ref(null)
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
        if (title.value === '新增按钮') {
            addMenu()
            return
        }
        editBottom()
    } else {
      console.log('error submit!', fields)
    }
  })
}

const addMenu = async() => {
	const {data} = await addBottomApi(ruleForm)
	emit("getCurrentMenu")
	handleCancle()
}

const editBottom = async() => {
    const {data} = await updataBottomApi(ruleForm)
	emit("getCurrentMenu")
	handleCancle()
}

const handleClose = () => {
	handleCancle()
}

const handleCancle = () => {
	ruleFormRef.value.resetFields()
	dialogVisible.value = false
}

defineExpose({
  dialogVisible,
  ruleForm,
  title
})
</script>
<style lang="scss" scoped></style>
